<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">

</head>
<body>
<header class="navbar clearfix" id="header"></header>

<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>
            </ul>
        </div>


    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">

        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->

                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li>
                                        <i class="fa fa-home"></i>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a href="#">营销管理</a>
                                    </li>
                                    <li>优惠劵</li>
                                </ul>
                                <!-- /BREADCRUMBS -->

                            </div>
                        </div>
                    </div>
                    <!-- /PAGE HEADER -->
                    <!-- FORMS QUERY-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="box border primary">
                                        <div class="box-title">
                                            <h4>
                                                <i class="fa fa-bars"></i>
                                                查询条件
                                            </h4>
                                        </div>
                                        <div class="box-body big" style="padding: 10px;">
                                            <form class="form-horizontal" role="form" id="form_Order" action="">
                                                <div class="form-group mrg-bt10">
                                                    <label class="col-sm-1 control-label" style="width: auto">商品名称：</label>
                                                    <div class="col-sm-2">
                                                        <input type="text" name="productName" class="form-control" placeholder="输入关键字">
                                                    </div>

                                                    <label class="col-sm-1 control-label" style="width: auto">日期区间：</label>
                                                    <div class="col-sm-4" style="display:inline-flex;margin-left:-10px">
                                                        <div class="col-sm-2" style="width:130px">
                                                            <input type="text" name="startDate" id="payStartDate" class="form-control bootstrap-datepicker">
                                                        </div>
                                                        <div style="width: 20px">至</div>
                                                        <div class="float-left" style="width:130px">
                                                            <input type="text" name="endDate" id="payEndDate" class="form-control bootstrap-datepicker">
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="form-group mrg-bt10">
                                                    <label class="control-label col-sm-1" style="line-height:34px;width: auto">发货方式：</label>
                                                    <div class="col-sm-2">
                                                        <select id="send_select" name="sendByYiigoo" class="col-md-12 select2-offscreen" tabindex="-1">
                                                            <option value="">请选择</option>
                                                            <option value=true>壹果发货</option>
                                                            <option value=false>商家发货</option>
                                                        </select>
                                                    </div>
                                                    <label class="col-sm-1 control-label" style="width: auto">上架日期区间：</label>
                                                    <div class="col-sm-4 sale_time_dev" style="display:inline-flex;margin-left:-10px">
                                                        <div class="col-sm-2" style="width:130px">
                                                            <input readonly type="text" name="saleStartDate" id="saleStartDate"
                                                                   class="form-control bootstrap-datepicker">
                                                        </div>
                                                        <div style="width: 20px">至</div>
                                                        <div class="float-left" style="width:130px">
                                                            <input readonly type="text" name="saleEndDate" id="saleEndDate"
                                                                   class="form-control bootstrap-datepicker">
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-3 inline">
                                                        <a class="btn btn-primary search">查询</a>

                                                        <a href="javaScript:;" class="btn btn-success export" style="margin-left:30px"
                                                           url="../../admin/report/exportHotProduct.do">
                                                            <i class="fa  fa-plus-square-o"></i> 导出销售
                                                        </a>
                                                    </div>
                                                </div>
                                            </form>
                                            <form id="form_export" action="">
                                                <input type="hidden" name="startDate">
                                                <input type="hidden" name="endDate">
                                                <input type="hidden" name="saleEndDate">
                                                <input type="hidden" name="saleEndDate">
                                                <input type="hidden" name="productName">
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                    <!-- /FORMS QUERY -->

                    <div class="row">
                        <!-- TABLES -->
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border primary">
                                <div class="box-title">
                                    <h4>
                                        <i class="fa fa-table"></i>
                                        记录数：
                                        <span id="total"></span>
                                        条
                                    </h4>

                                </div>
                                <div class="box-body">
                                    <table id="db_report_list" cellpadding="0" cellspacing="0" border="0"
                                           class="datatable table table-striped table-bordered table-hover">

                                    </table>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    </div>
                    <!-- /TABLES -->


                    <div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i>
								Top
							</span>
                    </div>
                </div>
                <!-- /CONTENT-->
            </div>
        </div>
    </div>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>
    var Report = function () {
        var $mainDataTable = null;

        var searchData = function () {

            var productName = $("input[name=productName]").val();
            var startDate = $("#payStartDate").val();
            var endDate = $("#payEndDate").val();

            var saleStartDate = $("#saleStartDate").val();
            var saleEndDate = $("#saleEndDate").val();
            var sendSelect = $("#send_select").val()

            var url = App.getContextPath()
                + "admin/report/searchProductReport.do?productName=" + productName;
            if (startDate != "")
                url += "&startDate=" + startDate;
            if (endDate != "")
                url += "&endDate=" + $.dateAdd(endDate);
            ;
            if (saleStartDate != "")
                url += "&saleStartDate=" + saleStartDate;
            if (saleEndDate != "")
                url += "&saleEndDate=" + $.dateAdd(saleEndDate);
            if (sendSelect != 'null' && sendSelect != "")
                url += "&sendByYiigoo=" + sendSelect;

            if ($mainDataTable) {
                $mainDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": true,
                "bFilter": false,// 去掉搜索框
                "bLengthChange": true,// 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 25,

                "bSort": false,
                "aoColumns": [{
                    "mDataProp": "productCode",
                    "sTitle": "商品编码",
                    "width": "10%"
                }, {
                    "mDataProp": "productName",
                    "sTitle": "商品名称",
                    "width": "10%"
                }, {
                    "mDataProp": "categoryName",
                    "sTitle": "商品分类",
                    "width": "6%"
                }, {
                    "sTitle": "销售件数(支付)",
                    "mDataProp": "saleNum",
                    "width": "10%",
                    "class": "format_number"
                }, {
                    "sTitle": "销售金额(支付)",
                    "mDataProp": "salePrice",
                    "width": "10%",
                    "class": "format_thousands"
                }]

            });

            $mainDataTable = $("#db_report_list").dataTable(dtSetting);
        };

        var exportOrder = function () {
            var url = $(this).attr("url");

            var startDate = $("#form_Order").find("input[name=startDate]").val();
            var endDate = $("#form_Order").find("input[name=endDate]").val();
            var saleStartDate = $("#form_Order").find("input[name=saleStartDate]").val();
            var saleEndDate = $("#form_Order").find("input[name=saleEndDate]").val();
            var productName = $("#form_Order").find("input[name=productName]").val();

            endDate = $.dateAdd(endDate);
            saleEndDate = $.dateAdd(saleEndDate);


            url += "?productName=" + productName;
            url += "&startDate=" + startDate;
            endDate = $.dateAdd(endDate);
            url += "&endDate=" + endDate;
            if (saleStartDate != '') {
                url += "&saleStartDate=" + saleStartDate;
                if (saleEndDate == "") {
                    saleEndDate = $.dateAdd($.nowDate());
                }
                url += "&saleEndDate=" + saleEndDate;
            }

            window.open(url)

        };

        return {
            init: function () {
                $.initDate($("#form_Order"), -7, 0);
                // $.initDate2($("#form_Order"),-1,1, "saleStartDate", "saleEndDate");
                $('.bootstrap-datepicker[name=saleStartDate]').bsdatepicker({format: 'yyyy-mm-dd'});
                $('.bootstrap-datepicker[name=saleEndDate]').bsdatepicker({format: 'yyyy-mm-dd'});

                $("#send_select").select2({placeholder: "请选择"});
                $(".search").click(searchData);
                searchData();
                $(".export").click(exportOrder)

            }
        }
    }();

    $(function () {
        $("#header").load("../head.html");
        App.init(); //Initialise plugins and elements
        Report.init();
    });
</script>
<!-- /JAVASCRIPTS -->
</body>
</html>